<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:include="include/css-head :: css-head">
</head>
<body>
<section class="content-header">
  <h1>
    <small></small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i>统计管理</a></li>
    <li class="active">工会答题统计</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
	 <div class="box">
            <div class="box-header">
              <h3 class="box-title">工会答题统计</h3>
              <br><br>
				<div class="clear"></div>
			</div>
            <div class="box-body">
              <table id="dataList" class="table table-bordered table-striped">
					<tr>
						<th width="100%">
							<div id="bartu" style="width: 100%;height: 325px;"></div>
						</th>
					</tr>
					<tr>
						<th width="100%">
							<div id="pietu" style="width: 100%;height: 325px;"></div>
						</th>
					</tr>
                </table>
			</div>
	 </div>
	 </div>
</section>
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/static/dist/js/adminlte.min.js"></script>
<script src="/static/js/path.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript">

	$(function () {
		getTu();
	})
	function  getTu(){
		$.ajax({
			url:"/staff/deptData",
			type:"get",
			dataType:"json",
			cache:false,
			data:{ },
			success:function(data){
				if(data.status == 'success'){
					var datas=data.data;
					var xdata = [];
					var ydata = [];
					var pieData = [];
					for ( var i in datas) {
						xdata.push(datas[i].name);
						ydata.push(datas[i].num);
						pieData.push({ name:datas[i].name,value: datas[i].num});
					}

					option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {            // 坐标轴指示器，坐标轴触发有效
								type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						grid: {
							left: '2%',
							right: '2%',
							bottom: '2%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data:xdata,
								axisTick: {
									alignWithLabel: true
								}
							}
						],
						yAxis: [
							{
								type: 'value'
							}
						],
						series: [
							{
								name: '答题人数',
								type: 'bar',
								barWidth: '55%',
								data: ydata
							}
						]
					};
					var bartu= echarts.init(document.getElementById("bartu"));
					bartu.setOption(option);




					var pietu= echarts.init(document.getElementById("pietu"));
					var color = ["#8d7fec","#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1","#cf9ef1","#cf9ef1","#cf9ef1","#cf9ef1"]
					pieoption = {
						backgroundColor: "rgba(255,255,255,1)",
						color: color,
						legend: {
							orient: "vartical",
							x: "left",
							top: "center",
							left: "60%",
							bottom: "0%",
							data: xdata,
							itemWidth: 8,
							itemHeight: 8,
							itemGap: 16,
							formatter: function(name) {
								return '' + name
							}
						},
						series: [{
							type: 'pie',
							clockwise: false, //饼图的扇区是否是顺时针排布
							minAngle: 2, //最小的扇区角度（0 ~ 360）
							radius: ["40%", "70%"],
							center: ["30%", "50%"],
							avoidLabelOverlap: false,
							itemStyle: { //图形样式
								normal: {
									borderColor: '#ffffff',
									borderWidth: 6,
								},
							},
							label: {
								normal: {
									show: false,
									position: 'center',
									formatter: '{text|{b}}\n{c} ({d}%)',
									rich: {
										text: {
											color: "#666",
											fontSize: 14,
											align: 'center',
											verticalAlign: 'middle',
											padding: 8
										},
										value: {
											color: "#8693F3",
											fontSize: 24,
											align: 'center',
											verticalAlign: 'middle',
										},
									}
								},
								emphasis: {
									show: true,
									textStyle: {
										fontSize: 24,
									}
								}
							},
							data: pieData
						}]
					};

					setTimeout(function() {
						pietu.on('mouseover', function(params) {
							if (params.name == ydata[0].name) {
								pietu.dispatchAction({
									type: 'highlight',
									seriesIndex: 0,
									dataIndex: 0
								});
							} else {
								pietu.dispatchAction({
									type: 'downplay',
									seriesIndex: 0,
									dataIndex: 0
								});
							}
						});

						pietu.on('mouseout', function(params) {
							pietu.dispatchAction({
								type: 'highlight',
								seriesIndex: 0,
								dataIndex: 0
							});
						});
						pietu.dispatchAction({
							type: 'highlight',
							seriesIndex: 0,
							dataIndex: 0
						});
					}, 1000);
					pietu.setOption(pieoption);
				}else{
					alert(data.msg);
				}
			}
		});
	}
</script>
</body>
</html>
